<template>
	<div class="system-add-role-container">
		<el-dialog :title="state.dialogTitle" v-model="state.dialog.isShowDialog" width="400px" :close-on-click-modal="false">
			<el-form :model="state.ruleForm" label-width="120px">
				<el-form-item label="公告名称">
					<el-input v-model="state.ruleForm.title" />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input v-model="state.ruleForm.content" type="textarea" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
					<!-- <el-button>Cancel</el-button> -->
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="editUser">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
// import { editUser } from '/@/api/user';
import { changeAnnounce } from '/@/api/announce';
// import moment from 'moment'
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const state = reactive({
	dialogTitle: '新增公告',
	actionType: 'add',
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	ruleForm: {
		title: '',
		content: '',
	},
	shortcuts: [] as any,
	confirmLoading: false,
	testLoading: false,
	allProduct: [] as any,
});

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 打开弹窗
const openDialog = async (row: any, actionType: string) => {
	state.dialog.isShowDialog = true;
	if (actionType == 'add') {
		state.dialogTitle = '新增公告';
		state.actionType = 'add';
		state.ruleForm = {
			title: '',
			content: '',
		};
	} else {
		state.dialogTitle = '修改公告';
		state.actionType = 'edit';
		state.dialog.isShowDialog = true;
		state.ruleForm = row;
	}
};

const onSubmit = () => {
	changeAnnounce(state.ruleForm).then(() => {
		ElMessage.success('保存成功');
		emit('refresh');
		closeDialog();
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.push_interval {
	padding-right: 5px;

	:deep {
		.el-input__suffix-inner {
			width: 18px;
		}
	}
}

.executionCycleDay {
	justify-content: space-around;
	display: flex;

	.executionCycleDayInput {
		width: 50%;
	}
}

.system-add-role-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
